import React, { useState } from "react";

import { IInputFieldParseTarget } from "interfaces/form_field";

import SettingsSection from "pages/admin/components/SettingsSection";
import PageDescription from "components/PageDescription";
import Button from "components/buttons/Button";
import Checkbox from "components/forms/fields/Checkbox";
import CustomLink from "components/CustomLink";
import GitOpsModeTooltipWrapper from "components/GitOpsModeTooltipWrapper";

import { IAppConfigFormProps } from "../constants";

const baseClass = "app-config-form";

interface IStatisticsFormData {
  enableUsageStatistics: boolean;
}

const Statistics = ({
  appConfig,
  handleSubmit,
  isPremiumTier,
  isUpdatingSettings,
}: IAppConfigFormProps): JSX.Element => {
  const [formData, setFormData] = useState<IStatisticsFormData>({
    enableUsageStatistics: appConfig.server_settings.enable_analytics,
  });

  const { enableUsageStatistics } = formData;

  const onInputChange = ({ name, value }: IInputFieldParseTarget) => {
    setFormData({ ...formData, [name]: value });
  };

  const onFormSubmit = (evt: React.MouseEvent<HTMLFormElement>) => {
    evt.preventDefault();

    // Formatting of API not UI
    const formDataToSubmit = {
      server_settings: {
        enable_analytics: enableUsageStatistics,
        deferred_save_host: appConfig.server_settings.deferred_save_host,
        query_reports_disabled:
          appConfig.server_settings.query_reports_disabled,
        scripts_disabled: appConfig.server_settings.scripts_disabled,
      },
    };

    handleSubmit(formDataToSubmit);
  };

  const telemetryAlwaysEnabled =
    isPremiumTier && !appConfig.license.allow_disable_telemetry;

  return (
    <SettingsSection title="Usage statistics">
      <PageDescription
        variant="right-panel"
        content={
          <p className={`${baseClass}__section-description`}>
            Help us improve Fleet by sending us anonymous usage statistics.
            <br />
            <br />
            This information helps our team better understand feature adoption
            and usage, and allows us to see how Fleet is adding value, so that
            we can make better product decisions. Fleet Premium customers always
            submit usage statistics data.
            <br />
            <br />
            <CustomLink
              url="https://fleetdm.com/docs/using-fleet/usage-statistics#usage-statistics"
              text="Learn more about usage statistics"
              newTab
            />
          </p>
        }
      />
      <form onSubmit={onFormSubmit} autoComplete="off">
        <Checkbox
          onChange={onInputChange}
          name="enableUsageStatistics"
          value={telemetryAlwaysEnabled ? true : enableUsageStatistics} // Set to true for all premium customers
          parseTarget
          disabled={telemetryAlwaysEnabled}
        >
          Enable usage statistics
        </Checkbox>
        <GitOpsModeTooltipWrapper
          tipOffset={-8}
          renderChildren={(disableChildren) => (
            <Button
              type="submit"
              disabled={disableChildren}
              className="button-wrap"
              isLoading={isUpdatingSettings}
            >
              Save
            </Button>
          )}
        />
      </form>
    </SettingsSection>
  );
};

export default Statistics;
